<html>
<head>
  <title>Home Assistant Loading Animation</title>
  <style type="text/css">
    /*  lazy placement and background for demo */
    body {
      background-color: #038fc7;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      background-image: radial-gradient(circle, #038fc7, #026b95);
      background-size: cover;
      background-position: 50% 50%;
    }

    svg {
      width: 66vw;
      height: 66vh;
      margin-left: 16.666vw;
      margin-top: 16.666vh;
    }

    /*main-logo*/
    .ha-logo path,
    .ha-logo circle {
      fill: none;
      stroke: #99e1fd;
      stroke-width: 0.125px;
      stroke-linejoin: round;
    }
    .ha-logo path.house,
    .ha-logo circle.house {
      stroke-linecap: round;
      stroke-width: .3px;
    }

    .loading.ha-logo circle {
      animation: nodes 6s linear infinite;
    }

    .loading.ha-logo .house {
      animation: house 6s ease infinite;
    }

    .loading.ha-logo .circut {
      animation: circut 6s cubic-bezier(0.7, 0.1, 0.1, 0.9) infinite;
    }

    @keyframes house {
      0% {
        stroke-dashoffset: -50;
        stroke-dasharray: 50 50;
      }
      45% {
        stroke-dashoffset: -100;
      }
      50% {
        stroke: #99e1fd;
      }
      60% {
        stroke: white;
      }
      75% {
        stroke: #99e1fd;
      }
      80% {
        stroke-dashoffset: -100;
      }
      100% {
        stroke-dashoffset: -130;
        stroke-dasharray: 50 50;
      }
    }
    @keyframes circut {
      0% {
        stroke-dasharray: 20 20;
        stroke-dashoffset: -20;
      }
      13% {
        stroke-dashoffset: -20;
      }
      50% {
        stroke-dashoffset: -40;
        stroke: #99e1fd;
      }
      60% {
        stroke: white;
      }
      70% {
        stroke: #99e1fd;
      }
      85% {
        stroke-dashoffset: -40;
      }
      100% {
        stroke-dashoffset: -60;
        stroke-dasharray: 20 20;
      }
    }
    @keyframes nodes {
      0% {
        stroke-dasharray: 0 4;
      }
      25% {
        stroke-dasharray: 0 4;
      }
      35% {
        stroke-dasharray: 4 0;
        stroke: #99e1fd;
      }
      41% {
        fill: none;
      }
      42% {
        fill: #99e1fd;
      }
      55% {
        fill: none;
        stroke: #99e1fd;
      }
      65% {
        fill: white;
        stroke: white;
      }
      75% {
        stroke: #99e1fd;
        fill: none;
        stroke-dasharray: 4 0;
      }
      85% {
        fill: #99e1fd;
        stroke: #99e1fd;
      }
      93% {
        fill: none;
        stroke-dasharray: 4 0;
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: -4;
        stroke-dasharray: 0 4;
      }
    }
    .ha-logo circle:nth-child(1n) {
      animation-delay: -0.054s;
    }

    .ha-logo circle:nth-child(2n) {
      animation-delay: -0.108s;
    }

    .ha-logo circle:nth-child(3n) {
      animation-delay: -0.162s;
    }

    .ha-logo circle:nth-child(4n) {
      animation-delay: -0.216s;
    }

    .ha-logo circle:nth-child(5n) {
      animation-delay: -0.27s;
    }

    .ha-logo circle:nth-child(6n) {
      animation-delay: -0.324s;
    }

    .ha-logo circle:nth-child(7n) {
      animation-delay: -0.378s;
    }

    .ha-logo circle:nth-child(8n) {
      animation-delay: -0.432s;
    }

    .ha-logo circle:nth-child(9n) {
      animation-delay: -0.486s;
    }

    .ha-logo circle:nth-child(10n) {
      animation-delay: -0.54s;
    }

    .ha-logo circle:nth-child(11n) {
      animation-delay: -0.594s;
    }

    .ha-logo circle:nth-child(12n) {
      animation-delay: -0.648s;
    }

    .ha-logo circle:nth-child(13n) {
      animation-delay: -0.702s;
    }

    .ha-logo circle:nth-child(14n) {
      animation-delay: -0.756s;
    }
  </style>
</head>
<body>
  <svg
    class="ha-logo loading"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 10 10">
    <path
      class="house"
      d="M1.9 8.5V5.3h-1l4-4.3 2.2
         2.1v-.6h1v1.7l1 1.1H7.9v3.2z"   />
    <path
      class="circut"
      d="M5 8.5V4m0 3.5l1.6-1.6V4.3M5
         6.3L3.5 4.9v-.6m2.7.7l.4.4L7
         5M5.9 6.1v.5h.5M4.2 5v.5h-.8m1
         1.5v.6h-.6m1.2.8L3.6 6.7M5
         8.4l1-.9h.7M4.6 3.6L5 4l.4-.4" />
    <g>
      <circle cx="5.5" cy="3.4" r="0.21" />
      <circle cx="4.5" cy="3.4" r="0.21" />
      <circle cx="6.6" cy="4.1" r="0.21" />
      <circle cx="3.5" cy="4.1" r="0.21" />
      <circle cx="4.2" cy="4.8" r="0.21" />
      <circle cx="6.1" cy="4.8" r="0.21" />
      <circle cx="7.1" cy="4.8" r="0.21" />
      <circle cx="6.6" cy="6.6" r="0.21" />
      <circle cx="5.9" cy="5.9" r="0.21" />
      <circle cx="3.2" cy="5.5" r="0.21" />
      <circle cx="3.5" cy="6.5" r="0.21" />
      <circle cx="4.4" cy="6.8" r="0.21" />
      <circle cx="3.6" cy="7.6" r="0.21" />
      <circle cx="6.9" cy="7.5" r="0.21" />
    </g>
  </svg>
</body>
</html>
